<template>
  <div>
    <!-- 搜索框 -->
    <div class="Search">
      <div class="back" @click="back">
        <img src="../assets/icon/向左.png" alt="" width="20px" />
      </div>
      <div class="ssk">
        <van-search
          @search="getSearch()"
          @clear="showHotList"
          @input="change"
          shape="round"
          background=""
          v-model="value"
          placeholder="请输入搜索关键词"
        />
      </div>
    </div>

    <!-- 热门搜索 -->
    <div v-show="ishot" class="Search-hot-history">
      <div class="hs">热门搜索</div>
      <div class="Search-hot-items">
        <div class="Search-hot-item" @click="getHotSearch(item.name)" v-for="(item,index) in HotProduct" :key="index">
          <div class="pdname">{{item.name}}</div>
        </div>
      </div>
      <div class="search-his">
        <div
          class="search-his-item"
          @click="getHotSearch(item)"
          v-for="(item, index) in rec"
          :key="index"
        >
          <div class="timepic">
            <img src="../assets/icon/time.svg" alt="" />
          </div>
          <div class="text">{{ item }}</div>
          <div class="del" @click.stop="del(index)">
            <img src="../assets/icon/del.svg" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 商品数据 -->
    <div class="menuproductList" v-show="!ishot">
      <div class="productList"   v-for="(item, index) in SearchData" :key="index">
        <div class="productListbox">
          <div class="productListimg">
            <img :src="item.smallImg" alt="" width="60px" height="60px" />
          </div>
          <div class="pdtext">
            <div class="pdName">
              <div class="productListname">{{ item.name }}</div>
              <div class="productListenname">{{ item.enname }}</div>
            </div>
            <div class="productListprice">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      value: "",
      //存放热门推荐数据
      HotProduct:[],
      //控制热搜显示隐藏
      ishot: true,
      //这是搜索出来的数据
      SearchData: [],
      //存放搜索记录
      rec: [],
      //搜索提示开关
      searchSong: true,
    };
  },
  created() {
    let a = JSON.parse(localStorage.getItem("history"));
    if (a) {
      this.rec = a;
    }
    this.getHotProduct();
  },
  methods: {
       //获取热门推荐数据
    getHotProduct(){
        this.axios({
            method:"get",
            url:"/typeProducts",
            params:{
                appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
                key:"isHot",
                value:1,
            },
        }).then((res)=>{
            this.HotProduct=res.data.result
            console.log(this.HotProduct);
        })
    },
    //搜索方法
    getSearch() {
      this.searchpd = false;
      if (this.value == '') {
        alert("无搜索结果");
        return;
      }
      //把关键字存到rec这个数组 往数组前面添加数据
      this.rec.unshift(this.value);
      //数组去重
      let arr = Array.from(new Set(this.rec));
      //把去重之后的数据(arr)存到本地存储(序列化)
      localStorage.setItem("history", JSON.stringify(arr));
      //取数据
      let a = JSON.parse(localStorage.getItem("history"));
      if (a) {
        this.rec = a;
      }
      this.axios({
        method: "get",
        url: "/search",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          name: this.value,
        },
      }).then((res) => {
        this.SearchData = res.data.result;
        console.log("这是搜索结果=>", res.data.result);
      });
    },
    //点击热搜搜索对应内容 同时隐藏热搜模块
    getHotSearch(e) {
      console.log(e);
      this.value = e;
      this.change();
      this.getSearch();
    },
    //输入框内容变化时，把热搜隐藏
    change() {
      this.ishot = false;
      // setTimeout(() => {
      //   this.jianyi();
      // }, 100);
    },
    showHotList() {
      this.ishot = true;
    },
    //重新搜索
    again() {
      this.searchpd = true;
    },
    //点击删除
    //函数实参/形参
    del(e) {
      this.rec.splice(e, 1);
      localStorage.setItem("history", JSON.stringify(this.rec));
    },
    SearchView() {
      this.$router.push({ name: "search" });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.hs{
  font-weight: bold;
  font-size: 12px;
  margin-top: 5px;
}
.Search-hot-items{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.pdname{
        font-size: 14px;
        padding: 0 14px;
        background-color: #fff;
        margin: 0 8px 8px 10px;
        border-radius: 25px;
        text-align: center;
        line-height: 30px;
}
.menuproductList {
  overflow-y: scroll;
  flex: 1;
  flex-wrap: wrap;
  .productListbox {
    height: 80px;
    display: flex;
    background-color: #fff;
    margin: 10px;
    .productListimg {
      margin: 10px;
    }
    .pdtext {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pdName {
        flex: 3;
        margin-top: 5px;
        font-size: 12px;
        .productListenname {
          margin-top: 5px;
          font-size: 10px;
        }
      }
      .productListprice {
        font-weight: bold;
        color: #001bb2;
        font-size: 16px;
        flex: 1;
        margin-left: auto;
      }
    }
  }
}
.text {
  margin-left: 10px;
  align-content: center;
  // border: 1px solid black;
}
.search-his-item {
  display: flex;
  font-size: 14px;
  margin-bottom: 8.5px;
  // margin-left: 10px;
  flex: 5;
  flex: wrap;
  align-content: flex-start;
  border-bottom: 1px solid #cccccc;
}
.del {
  display: flex;
  width: 13px;
  height: 13px;
  // margin-right: auto;
  margin-bottom: 8px;
  margin-top: 8.5px;
  margin-left: auto;
  margin-right: 18px;
}
.timepic img {
  margin-top: 8px;
  width: 15px;
  height: 15px;
  flex: 1;
  // border: 1px solid black;
}
.search-his {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 30px 0 0 10px;
  line-height: 30px;
  // border: 1px solid black;
}
/deep/.van-search {
  width: 100%;
}
.Search {
  background-color: #fff;
  display: flex;
}
.back {
  width: 20px;
  margin-left: 15px;
  margin-top: 15px;
  // position: absolute;
}
.ssk {
  flex: 1;
  // position: relative;
}
</style>